<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件的嵌套</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <!-- <hello></hello> -->
      <!-- <school> -->
      <!-- 不是在这用！！！ -->
      <!-- <student></student> -->
      <!-- </school> -->
      <!-- <app></app> -->
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    const student = Vue.extend({
      template: `
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
      data() {
        return {
          studentName: "张三",
          age: 18,
        };
      },
    });

    const school = Vue.extend({
      template: `
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
        `,
      data() {
        return {
          schoolName: "南京财经大学",
          address: "文苑路3号",
        };
      },
      components: {
        student,
      },
    });

    const hello = Vue.extend({
      template: `<h1>{{msg}}</h1>`,
      data() {
        return {
          msg: "hello",
        };
      },
    });

    const app = Vue.extend({
      template: `
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
      components: {
        school,
        hello,
      },
    });

    new Vue({
      template: `<app></app>`,
      el: "#root",
      components: {
        // school,
        // hello,
        app,
      },
    });
  </script>
</html>
